<template id="listDetail">
    <div>
        <div class="listDetail_top">
            <img src="../image/blue_da.png" alt=""  @click="getListDetail()">
            <input type="text" placeholder="" v-model="keyword">
            <span @click="search(keyword)">搜索</span>
            <img src="../image/wang.jpg" alt="">
            <img src="../image/cuo.jpg" alt="" @click="delKeyword()" v-show="keyword">
        </div>
        <div id="list_nnn">
        <div class="listDetail_list" v-for="v in goods_list">
            <div class="listDetail_left">
                <img @click="goods_info(v.goods_id)" :src="v.goods_thumb" alt="" v-bind:id="'img'+v.goods_id">
            </div>
            <div class="listDetail_right">
                <p>{{v.goods_name}}</p>
                <p>{{v.goods_brief}}</p>
                <p v-if="v.goods_type == 2"></p>
                <p v-if="v.goods_type == 1">{{v.goods_share}} {{v.goods_weight}}kg</p>
                <p>
                    <time>¥</time>
                    {{v.shop_price}}
                    <span v-if="v.goods_type == 2">起</span>
                    <img src="../image/gou.png" alt=""  @click="v.goods_type == 1 ? addCart(v.goods_id) : goods_info(v.goods_id)">
                </p>
            </div>
        </div>
            <div class="commodity_more" v-show="data.page < data.page_count">
                <p @click="getMore();">加载更多</p>
            </div>
            <v-shopCar></v-shopCar>
        </div>


    </div>
</template>
<script>
    import shopCar from './shopCar.vue';
    export default {
        name:'listDetail',
        components:{
            'v-shopCar':shopCar,
        },
        data(){
            return{
                keyword:this.$route.query.keyword,
                data:[],
                goods_list:[]
            }
        },
        mounted:function(){
            this.goodsList(this.keyword);
        },
        methods:{
            addCart:function (gid, number = 1) {
                this.GLOBAL.addCart(this,gid,number);
                this.GLOBAL.get_te1(gid)
            },
            getListDetail:function(){
                window.history.go(-1);
            },

            delKeyword:function () {
                this.keyword = '';
            },

            search:function () {
                this.goodsList(this.keyword);
            },

            getMore:function () {
                this.goodsList(this.keyword, parseInt(this.data.page) + 1);
            },

            // 商品页跳转
            goods_info:function (id) {
                this.$router.push('/shopDetails?goods_id=' + id);
            },

            goodsList:function (keyword, page=1) {
                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Goods.php?mode=searchGoods',
                    {
                        params:{
                            goods_id:this.id,
                            uid:this.GLOBAL.getCookie('uid'),
                            time:this.GLOBAL.getCookie('time'),
                            token:this.GLOBAL.getCookie('token'),
                            session_id:this.GLOBAL.getCookie('user_cart_id'),
                            keyword:keyword,
                            page:page
                        },
                        jsonp:'callback'
                    }
                ).then(function(res){

                    if (res.body.code != 200) {
                        alert(res.body.msg);
                        return false;
                    }

                    if (page > 1) {
                        if (res.body.code == 200) {

                            this.goods_list = this.goods_list.concat(res.body.data.goods_list);
                            this.data.keyword = res.body.data.keyword;
                            this.data.page = res.body.data.page;
                            this.data.page_count = res.body.data.page_count;
                        }
                        return false;
                    } else {
                        this.data=res.body.data;
                        this.goods_list = res.body.data.goods_list;
                    }
                });
            },

        }
    }
</script>
<style>
    .flyer-img{
        height:0.5rem;
        width:0.5rem;
        border-radius: 50%;
    }
    .listDetail_right p:nth-of-type(4) img{
        position:absolute;
        width:0.64rem;
        height:0.64rem;
        left:3.6rem;
        top:0.1rem;
        right:0.26rem;
    }
    .listDetail_right p:nth-of-type(4) span{

    }
    .listDetail_right p:nth-of-type(4){
        width:1.8rem;
        height:0.68rem;
        line-height:0.68rem;
        text-align:center;
        color:#ed8100;
        font-size:0.2rem;
        position:relative;

    }
    .listDetail_right p:nth-of-type(3){
        width:2.2rem;
        height:0.43rem;
        line-height:0.43rem;
        /*text-align:center;*/
        text-indent: 0.5rem;
        color:#bababa;
        font-size:0.18rem;

    }
    .listDetail_right p:nth-of-type(2){
        width:3.13rem;
        height:0.35rem;
        line-height:0.35rem;
       /* text-align:center;*/
        text-indent: 0.5rem;
        color:#bababa;
        font-size:0.22rem;

    }
    .listDetail_right p:nth-of-type(1){
       /* width:2.43rem;*/
        height:0.35rem;
        line-height:0.35rem;
       /* text-align:center;*/
        text-indent: 0.5rem;
        color:#353535;
        font-size:0.22rem;

    }
    .listDetail_right{
        float:right;
        height:1.9rem;
        width:4.5rem;
        padding-top:0.2rem;
    }
    .listDetail_left{
        width:1.7rem;
        height:2.1rem;
        position:relative;
        float:left;
    }
    .listDetail_left img{
        display:block;
        position:absolute;
        width:1.55rem;
        height:1.56rem;
        left:0.25rem;
        top:0.27rem;
    }
    .listDetail_list{
        width:100%;
        height:2.1rem;
        border-bottom:1px solid #f0f0f0;
    }
    #list_nnn{
        width:100%;
        min-height:2.1rem;
    }
    .listDetail_top img:nth-of-type(3){
        width:0.27rem;
        height:0.25rem;
        display:block;
        position:absolute;
        left:5.04rem;
        top:0.28rem;
    }
    .listDetail_top img:nth-of-type(2){
        display:block;
        position:absolute;
        width:0.23rem;
        height:0.25rem;
        left:1.08rem;
        top:0.28rem;
    }
    .listDetail_top input{
        display:block;
        border:0;
        width:4.43rem;
        height:0.48rem;
        background:#e5e5e5;
        outline:none;
        position:absolute;
        left:1rem;
        top:0.16rem;
        border-radius:0.1rem;
        text-indent: 0.42rem;
        color:#afafaf;
        font-size:0.2rem;

    }
    .listDetail_top span{
        display:block;
        position:absolute;
        width:0.9rem;
        height:0.78rem;
        line-height:0.78rem;
        text-align:center;
        color:#2eaffc;
        font-size:0.21rem;
        top:0;
        right:0;
    }

    .listDetail_top img:nth-of-type(1){
        width:0.36rem;
        height:0.36rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .listDetail_top{
        width:100%;
        height:0.78rem;
        position:relative;
        border-bottom:1px solid #d7d7d7;
    }

    .commodity_more{
        width:100%;
        height:0.85rem;
    }
    .commodity_more p{
        margin:auto;
        width:1.61rem;
        height:0.42rem;
        line-height:0.42rem;
        text-align:center;
        color:#313131;
        border:1px solid #313131;
        font-size:0.2rem;
        border-radius:0.2rem;
    }
</style>
